{% extends "base.html" %}
{% load staticfiles %}

{% block content %}
<br>
<br>
<div>
	<div id="game-container" style="text-align: center"></div>

	<div style="width:55%; margin: 0 auto; margin-top:4.5em">
		<h3 style="margin-bottom:-0.5em; font-size:1.5em">Current Time:</h3>
		<div class="row">
			<div class="col-md-8" id="game-time" style="">
				<h2><span id="game-time-content"></span></h2> 
			</div>
			<div class="col-md-4">
				
				<h2 style="text-align: right; {% if mode == 'simulate' %} display: none {% endif %}">
					<button id="play_button" type="button" class="btn btn-default">
				    <strong style=" font-size:1.2em"><i class="glyphicon glyphicon-play"></i> &nbsp;Play</strong>
				  </button>
				  
				  <button id="pause_button" type="button" class="btn btn-default">
				    <strong style=" font-size:1.2em"><i class="glyphicon glyphicon-pause"></i> &nbsp;Pause</strong>
				  </button>

				</h2>
				
			</div>
		</div>

		<br>
		<hr style="border-color:#999999">
		<br>

		{% for p_name, p_name_os in persona_names %}
			<div class="media" style="background-color:#EEEEEE; padding:1em; padding-left:3.5em; padding-right:2em; border-radius:10px">
			  <div class="media-left media-middle">
			    <a href="#">
			      <img class="media-object" src="{% static 'img/atlas.png' %}" style="width:5em">
			    </a>
			  </div>
			  <div class="media-body" style='padding-left:3em; padding-top:0.5em; padding-bottom:1em'>
			  	<div class="row">
			    	<h2 class="col-md-8" id="name__{{ p_name_os }}" style="margin-bottom:0.8em; font-size:1.85em; ">
			    		{{p_name}} &nbsp;&nbsp;
			    		<a href="{% url 'replay_persona_state' sim_code step p_name_os %}" style="font-size:0.6em">State Details</a>
			    	</h2>
			    </div>
			    <div style="">
					  <p style="font-size:1.2em"><strong>Current Action:</strong> <br><span id="current_action__{{ p_name_os }}"></span></p>
					  <p style="font-size:1.2em"><strong>Location:</strong> <br><span id="target_address__{{ p_name_os }}"></span></p>
					  <p style="font-size:1.2em"><strong>Current Conversation:</strong> <br><span id="chat__{{ p_name_os }}"></span></p>
					</div>
			  </div>
			</div>	
			<br>
		{% endfor %}




		

	</div>
</div>

  



<div style="padding-bottom:15em"> </div>


<!-- partial -->
<script src='https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js'></script>
{% include 'home/main_script.html' %}
{% endblock content %}

